
var featuredPropertiesCom = Vue.extend({

    data() {
        return {
            houseList: [],
        };
    },
    mounted: function() {
        this.$nextTick(function() {//this.TouchSlide();
            this.fetchHouseData();
            

        });
    },
    methods: {
        fetchHouseData(){
            //var _this=this;
            this.houseList = JSON.parse(localStorage.getItem('house'));
            this.zoomShow();
        },
      zoomShow(){
        $("a.zoom").on("click", function (e) {
            e.preventDefault();
        });
      },
    },
    props: [''],
    template: '\
<section id="home-property-listing">\
<header class="section-header home-section-header text-center">\
    <div class="container">\
        <h2 class="wow slideInRight">Featured Properties</h2>\
        <p class="wow slideInLeft">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut <br>\
            labore et dolore magna aliquan ut enim ad minim veniam.</p>\
    </div>\
</header>\
    <div class="container">\
    <div class="row">\
        <div class="col-lg-4 col-sm-6 layout-item-wrap" v-for="(item,index) in houseList" v-if="index < 6 ">\
            <article class="property layout-item clearfix">\
                <figure class="feature-image">\
                    <router-link class="clearfix zoom" :to="\'/goodsDetail/\' + index" ><img data-action="zoom" v-bind:src="item.imgUrl" alt="Property Image"></router-link>\
                    <span class="btn btn-warning btn-sale" v-show="item.forSale">for sale</span>\
                </figure>\
                <div class="property-contents clearfix">\
                    <header class="property-header clearfix">\
                        <div class="pull-left">\
                            <h6 class="entry-title"><router-link :to="\'/goodsDetail/\' + index" >{{item.title}}</router-link></h6>\
                            <span class="property-location"><i class="fa fa-map-marker"></i>{{item.address}}</span>\
                        </div>\
                        <button class="btn btn-primary btn-price pull-right btn-3d" v-bind:data-hover="item.price | currency"><strong>{{item.price | currency}}</strong></button>\
                    </header>\
                    <div class="property-meta clearfix">\
                        <span><i class="fa fa-arrows-alt"></i> 3060 SqFt</span>\
                        <span><i class="fa fa-bed"></i> 3 Beds</span>\
                        <span><i class="fa fa-bathtub"></i> 3 Baths</span>\
                        <span><i class="fa fa-cab"></i> Yes</span>\
                    </div>\
                    <div class="contents clearfix">\
                        <p>{{item.info}}</p>\
                    </div>\
                    <div class="author-box clearfix">\
                        <a href="#" class="author-img"><img src="assets/images/agents/1.jpg" alt="Agent Image"></a>\
                        <cite class="author-name">Personal Seller: <a href="#">Linda Garret</a></cite>\
                        <span class="phone"><i class="fa fa-phone"></i> 00894 692-49-22</span>\
                    </div>\
                </div>\
            </article>\
        </div>\
    </div>\
    </div>\
</section>\
',

});
